<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>头部导航栏布局</title>
	<!-- 		<link rel="shortcut icon" type="text/css" href="./images/favico.ico"/> -->
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/all.css">
	<link rel="stylesheet" type="text/css" href="css/trade.css" />

</head>

<body>
	<!-- 项目的最外层 -->
	<div class="outer">

		<!-- 头部 -->
		<header class="header">
			<!-- 头部的第一行 -->
			<div class="top">
				<div class="container">
					<div class="loginList">
						<p>美淘惠欢迎您！</p>
						<p>
							<span>请</span>
							<a href="###">登录</a>
							<a href="###" class="register">免费注册</a>
						</p>
					</div>
					<div class="typeList">
						<a href="###">我的订单</a>
						<a href="###">我的购物车</a>
						<a href="###">我的美淘惠</a>
						<a href="###">美淘惠会员</a>
						<a href="###">企业采购</a>
						<a href="###">关注美淘惠</a>
						<a href="###">合作招商</a>
						<a href="###">商家后台</a>
					</div>
				</div>
			</div>
			<!--头部第二行 搜索区域-->
			<div class="bottom">
				<h1 class="logoArea">
					<a class="logo" title="美淘惠" href="###" target="_blank">
						<img src="./images/Logo.png" alt="">
					</a>
				</h1>
				<div class="searchArea">
					<form action="###" class="searchForm">
						<input type="text" id="autocomplete" class="input-error input-xxlarge" />
						<button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
					</form>
				</div>
			</div>
		</header>

		<!-- 买卖 -->
		<h3 class="title">填写并核对订单信息</h3>
		<div class="content">
			<h5 class="receive">收件人信息</h5>
			<div class="address clearFix">
				<span class="username selected">张三</span>
				<p>
					<span class="s1">北京市昌平区宏福科技园综合楼6层</span>
					<span class="s2">15010658793</span>
					<span class="s3">默认地址</span>
				</p>
			</div>
			<div class="address clearFix">
				<span class="username selected">李四</span>
				<p>
					<span class="s1">北京市昌平区宏福科技园综合楼6层</span>
					<span class="s2">13590909098</span>
					<span class="s3">默认地址</span>
				</p>
			</div>
			<div class="address clearFix">
				<span class="username selected">王五</span>
				<p>
					<span class="s1">北京市昌平区宏福科技园综合楼6层</span>
					<span class="s2">18012340987</span>
					<span class="s3">默认地址</span>
				</p>
			</div>
			<div class="line"></div>
			<h5 class="pay">支付方式</h5>
			<div class="address clearFix">
				<span class="username selected">在线支付</span>
				<span class="username" style="margin-left:5px;">货到付款</span>

			</div>
			<div class="line"></div>
			<h5 class="pay">送货清单</h5>
			<div class="way">
				<h5>配送方式</h5>
				<div class="info clearFix">
					<span class="s1">天天快递</span>
					<p>配送时间：预计8月10日（周三）09:00-15:00送达</p>
				</div>
			</div>
			<div class="detail">
				<h5>商品清单</h5>
				<ul class="list clearFix">
					<li>
						<img src="./images/goods.png" alt="">
					</li>
					<li>
						<p>
							Apple iPhone 6s (A1700) 64G 玫瑰金色 移动联通电信4G手机硅胶透明防摔软壳 本色系列</p>
						<h4>7天无理由退货</h4>
					</li>
					<li>
						<h3>￥5399.00</h3>
					</li>
					<li>X1</li>
					<li>有货</li>
				</ul>
				<ul class="list clearFix">
					<li>
						<img src="./images/goods.png" alt="">
					</li>
					<li>
						<p>
							Apple iPhone 6s (A1700) 64G 玫瑰金色 移动联通电信4G手机硅胶透明防摔软壳 本色系列</p>
						<h4>7天无理由退货</h4>
					</li>
					<li>
						<h3>￥5399.00</h3>
					</li>
					<li>X1</li>
					<li>有货</li>
				</ul>
			</div>
			<div class="bbs">
				<h5>买家留言：</h5>
				<textarea placeholder="建议留言前先与商家沟通确认" class="remarks-cont"></textarea>

			</div>
			<div class="line"></div>
			<div class="bill">
				<h5>发票信息：</h5>
				<div>普通发票（电子） 个人 明细</div>
				<h5>使用优惠/抵用</h5>
			</div>
		</div>
		<div class="money clearFix">
			<ul>
				<li>
					<b><i>1</i>件商品，总商品金额</b>
					<span>¥5399.00</span>
				</li>
				<li>
					<b>返现：</b>
					<span>0.00</span>
				</li>
				<li>
					<b>运费：</b>
					<span>0.00</span>
				</li>
			</ul>
		</div>
		<div class="trade">
			<div class="price">应付金额:　<span>¥5399.00</span></div>
			<div class="receiveInfo">
				寄送至:
				<span>北京市昌平区宏福科技园综合楼6层</span>
				收货人：<span>张三</span>
				<span>15010658793</span>
			</div>
		</div>
		<div class="sub clearFix">
			<a href="##" class="subBtn">提交订单</a>

		</div>
		<!-- 底部 -->
		<div class="footer">
			<div class="footer-container">
				<div class="footerList">
					<div class="footerItem">
						<h4>购物指南</h4>
						<ul class="footerItemCon">
							<li>购物流程</li>
							<li>会员介绍</li>
							<li>生活旅行/团购</li>
							<li>常见问题</li>
							<li>购物指南</li>
						</ul>

					</div>
					<div class="footerItem">
						<h4>配送方式</h4>
						<ul class="footerItemCon">
							<li>上门自提</li>
							<li>211限时达</li>
							<li>配送服务查询</li>
							<li>配送费收取标准</li>
							<li>海外配送</li>
						</ul>
					</div>
					<div class="footerItem">
						<h4>支付方式</h4>
						<ul class="footerItemCon">
							<li>货到付款</li>
							<li>在线支付</li>
							<li>分期付款</li>
							<li>邮局汇款</li>
							<li>公司转账</li>
						</ul>
					</div>
					<div class="footerItem">
						<h4>售后服务</h4>
						<ul class="footerItemCon">
							<li>售后政策</li>
							<li>价格保护</li>
							<li>退款说明</li>
							<li>返修/退换货</li>
							<li>取消订单</li>
						</ul>
					</div>
					<div class="footerItem">
						<h4>特色服务</h4>
						<ul class="footerItemCon">
							<li>夺宝岛</li>
							<li>DIY装机</li>
							<li>延保服务</li>
							<li>美淘惠E卡</li>
							<li>美淘惠通信</li>
						</ul>
					</div>
					<div class="footerItem">
						<h4>帮助中心</h4>
						<img src="./images/wx_cz.jpg">
					</div>
				</div>
				<div class="copyright">
					<ul class="helpLink">
						<li>关于我们
							<span class="space"></span>
						</li>
						<li>联系我们
							<span class="space"></span>
						</li>
						<li>关于我们
							<span class="space"></span>
						</li>
						<li>商家入驻
							<span class="space"></span>
						</li>
						<li>营销中心
							<span class="space"></span>
						</li>
						<li>友情链接
							<span class="space"></span>
						</li>
						<li>关于我们
							<span class="space"></span>
						</li>
						<li>营销中心
							<span class="space"></span>
						</li>
						<li>友情链接
							<span class="space"></span>
						</li>
						<li>关于我们</li>
					</ul>
					<p>地址：北京市昌平区宏福科技园综合楼6层</p>
					<p>京ICP备19006430号</p>
				</div>
			</div>
		</div>
	</div>

</body>

</html>